import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Popconfirm,Icon } from 'antd'

/***
 * VED view edit delete
 */
export default class extends Component {
    static propTypes = {
        onDel: PropTypes.func,
        renderView: PropTypes.func,
        renderEdit: PropTypes.func,
        renderAddtionalEl: PropTypes.func
    }

    constructor(props) {
        super(props)
        this.state = {
            viewVisible: false,
            editVisible: false,
        }
    }

    renderXView = () => {
        if(this.state.viewVisible && this.props.renderView) {
            return this.props.renderView(this.closeView)
        }
    }

    renderXEdit = () => {
        if(this.state.editVisible && this.props.renderEdit) {
            return this.props.renderEdit(this.closeEdit)
        }
    }

    render = () => {
        const {onDel, renderView, renderEdit, renderAddtionalEl} = this.props
        return (
            <span>
                <a onClick={this.openView}><span>查看</span></a>
                <span className="ant-divider" />
                <a onClick={this.openEdit}><span>修改</span></a>
                <span className="ant-divider" />
                <Popconfirm title="确认删除?" onConfirm={onDel}>
                    <a> <span>删除</span></a>
                </Popconfirm>
                {
                    renderAddtionalEl && renderAddtionalEl()
                }
                {
                    this.renderXView()
                }
                {
                    this.renderXEdit()
                }
            </span>
        )
    }

    openView = () => {
        this.setState({
            viewVisible: true
        })
    }
    closeView = () => {
        this.setState({
            viewVisible: false
        })
    }
    openEdit = () => {
        this.setState({
            editVisible: true
        })
    }
    closeEdit = () => {
        this.setState({
            editVisible: false
        })
    }
}
